<script setup lang="ts">
import { getBanner, getSongSheet } from '@/api/recommend'
import BScroll from '@better-scroll/core'
import useInitScrollHeight from '@/common/use-init-scroll-height'
import usePaddingBottom from '@/common/use-padding-bottom'
import { px2vmin } from '@/utils'
const { paddingBottomStyle } = usePaddingBottom()
const router = useRouter()
const bannerList = ref<IBannerItem[]>([])
// 获取轮播图数据
onMounted(async () => {
  const { banners } = await getBanner()
  bannerList.value = banners
})
const { scrollHeight } = useInitScrollHeight(['recommend van-skeleton', 'van-tabbar', 'van-search'])
const songSheetList = ref<IPlaylistItem[]>([])
const hasMore = ref<boolean>(true)
const offset = ref<number>(1)
const loading = ref<boolean>(false)
const name = ref<string>('')
const pic = ref<string>('')
// 获取歌单
onMounted(() => {
  pullingUp()
})

// 上拉加载更多
async function pullingUp(scroll?: BScroll) {
  if (!hasMore.value) {
    return
  }
  if (loading.value) {
    return
  }
  loading.value = true
  const { more, playlists } = await getSongSheet(offset.value++, 50)
  hasMore.value = more
  songSheetList.value = [...songSheetList.value, ...playlists]
  scroll?.finishPullUp()
  loading.value = false
}
function songSheetClick(songSheet: IPlaylistItem) {
  name.value = songSheet.name
  pic.value = songSheet.coverImgUrl
  router.push({
    path: `/recommend/${songSheet.id}`
  })
}
</script>

<template>
  <div class="recommend">
    <van-skeleton :loading="bannerList.length === 0" :style="{ height: px2vmin(145), padding: 0 }">
      <template #template>
        <van-skeleton-paragraph :style="{ height: px2vmin(145), background: '#666' }" />
      </template>
      <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
        <van-swipe-item v-for="(banner, index) in bannerList" :key="index">
          <img :src="banner.pic" style="width: 100%" :alt="banner.typeTitle" />
        </van-swipe-item>
      </van-swipe>
    </van-skeleton>

    <scroll :bounce="false" :height="scrollHeight" style="overflow: hidden" @pulling-up="pullingUp">
      <ul class="song-sheet" :style="paddingBottomStyle">
        <template v-if="songSheetList.length > 0">
          <li
            v-for="(songSheet, index) in songSheetList"
            :key="index"
            class="song-sheet-item"
            @click="songSheetClick(songSheet)"
          >
            <span class="img-box">
              <img v-lazy="songSheet.coverImgUrl" alt="" />
            </span>
            <div class="text">
              <p class="name">{{ songSheet.name }}</p>
              <p class="description">{{ songSheet.description }}</p>
            </div>
          </li>
        </template>
        <template v-else>
          <van-skeleton>
            <template #template>
              <ul style="width: 100%">
                <li
                  v-for="item in Math.ceil(scrollHeight / 60)"
                  :key="item"
                  class="song-sheet-item"
                >
                  <span class="img-box">
                    <img src="@/assets/images/default.png" alt="" />
                  </span>
                  <div class="text">
                    <p class="name" :style="{ background: '#666' }" />
                    <p class="description" :style="{ background: '#666' }" />
                  </div>
                </li>
              </ul>
            </template>
          </van-skeleton>
        </template>
      </ul>
    </scroll>

    <router-view v-slot="{ Component }">
      <transition name="slide">
        <component :is="Component" :title="name" :pic="pic" />
      </transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.recommend {
  display: flex;
  flex-direction: column;
  .my-swipe {
    height: 145px;
  }
  .song-sheet {
    padding-top: 15px;
    .song-sheet-item {
      padding: 0 15px 15px;
      display: flex;
      .img-box {
        width: 45px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
      }
      .text {
        padding: 0 0 0 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        overflow: hidden;
        .name {
          height: 16px;
          @include no-wrap;
        }
        .description {
          height: 16px;
          @include no-wrap;
          color: $color-text-d;
        }
      }
    }
  }
  :deep(.swiper-pagination-bullet-active) {
    background-color: #ffffff;
  }
}
</style>
